<!DOCTYPE html>
<html lang="en">
<head>
   {{template "pc/public/mycss.html" .}}
</head>
<style type="text/css">
	#wrapper{
		background: #f5f5f5!important;
	}
	.header-center{
		background: #fff;
	}
	.user_left{
		background: #fff;
	}
	.fenlei{
		width: 20%;
	}
	
	@media (max-width: 992px){
		.fenlei{
		    width: 100%;
		}
	}
</style>
<body class="common-home res layout-home1 recharge">
<div id="wrapper" class="wrapper-full banners-effect-7">
	<!-- Header Container  -->
	 {{template "pc/public/head.html" .}}
    {{template "pc/public/mytop.html" .}}
	<div class="main-container container">
		<div class="row mb-50">
			<!--Left Part Start -->
    {{template "pc/public/myleft.html" .}}
			<!--Middle Part Start-->
			<div id="content" class="col-md-10 col-sm-8 right mt-15">
        <p class="hd">充值余额</p>   
        <div>
          <p><span>充值金额：</span><input type="number" name="money" placeholder="请输入您要充值的金额"></p>
          <ul class="payType">
            <li class="on" data-type=2><span><img src="https://tcsc.oss-cn-hangzhou.aliyuncs.com/static/pc/img/pc/alipay.png"></span></li>
            <li data-type=1><span><img src="https://tcsc.oss-cn-hangzhou.aliyuncs.com/static/pc/img/pc/wxpay.png"></span></li>
          </ul>
          <button id="cz">充值</button>
        </div>
      </div>
		</div>
	</div>
</div>
<style type="text/css">
      .wxpay_mask{position: fixed;width: 100vw;height: 100vh;background: rgba(0,0,0,0.5);z-index: 100000;top: 0;left: 0;display: none;box-sizing: border-box;}
      .wxpay_mask #qrcode{position: absolute;top: calc(50vh - 120px);width: 240px;height: 240px;left: calc(50vw - 120px);z-index: 1000001;
        background: #fff;padding: 20px;border-radius: 5px;}
      .scan{position: absolute;top: calc(50vh + 100px);width: 240px;height: 45px;left: calc(50vw - 120px);z-index: 1000001;
        background: #fff;padding:0 20px 0 20px;border-radius: 5px;font-size: 16px;line-height: 45px;text-align: left;color: #666}
      .scan i.iconfont{color: #009900;font-size: 22px;margin-right: 5px;float: left;}
    </style>
  <div class="wxpay_mask">
    <div id="qrcode">
      
    </div>
    <div class="scan">
      <i class="iconfont">&#xe81b;</i>请使用微信扫一扫
    </div>
  </div>
<!-- Footer Container -->
{{template "pc/public/foot.html" .}}
{{template "pc/public/myfoot.html" .}}
<script type="text/javascript" src="https://tcsc.oss-cn-hangzhou.aliyuncs.com/static/pc/js/jquery.qrcode.min.js"></script>
</body>
</html>
<script type="text/javascript">
$('.payType li').click(function() {
  $('.payType li').each(function(){
    $(this).attr('class','')
  })
  $(this).attr('class','on')
})
$('#cz').click(function(){
  var money=$('input[name="money"]').val()
  var type=$('.payType .on').attr('data-type')
  if(money>={{.system.recharge}}){
    $.ajax({
      url:window.location.href,
      type:'post',
      data:{money:money,type:type},
      success:function(res){
        if(res.status==1){
          if(type==1){
              wxpay(res.res.url)
          }else{
            // console.log(res.res)
            window.location.href=res.res
          } 
        }else if(res.status==0){
          showToast("网络繁忙,请稍后再试~")
        }
      }
    })
  }else{
     showToast("一次需充值{{.system.recharge}}以上~")
  }
})
function wxpay(codeurl){
    $('#qrcode').qrcode({
      render: "canvas", //也可以替换为table
      width: 200,
      height: 200,
      text: codeurl
    })
    $('.wxpay_mask').show()
    $('body').css({ 
         "overflow-x":"hidden",
         "overflow-y":"hidden"       
     });
    setInterval(checkPay,5000)
  }
  function checkPay(){
    $.ajax({
      url:'/shopcar/ordercheck',
      data:{oid:oid},
      success:function(res){
        if(res==1){
          $('.wxpay_mask').hide()
            showToast("支付成功")
            setTimeout(function(){window.location.href='/my/order'}, 1500)
        }
      }
    })
  }
</script>